<template>
  <div class="login">
    <div class="login-con">
      <!-- 切换登录或注册列表 -->
      <ul class="menu-tab" >
        <li v-for="(item, index) in menuData" :key="'menu' + index" :class="{ current: item.current }"
        @click="clickMenu(item)">{{ item.txt }}</li>
      </ul>
      <!-- 表单部分 -->
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
        <!-- 修改提示文字 并且修改type类型 与v-model绑定的数据 并且添加类名-->
        <el-form-item prop="username" class="item-from">
          <label for="username">邮箱</label>
          <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="password" class="item-from">
          <label for="password">密码</label>
          <el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" minlength="6"
            maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="passwords" class="item-from" v-show="model === 'register'">
          <label>重复密码</label>
          <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" minlength="6"
            maxlength="20"></el-input>
        </el-form-item>

        <!-- 设置显示登录注册按钮 -->
        <el-form-item>
          <el-button type="danger" :disabled="btnbool" @click="submitForm(ruleFormRef)">{{ model === 'login' ? "登录" : "注册" }}</el-button>
          <el-button type="info" @click="resetForm(ruleFormRef)" style="margin-left: 50px">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单部分结束 -->

    </div>
  </div>
</template>
  
<script setup lang="ts">
// 路由跳转--登录成功后跳转到首页
import {useRouter} from 'vue-router'
// 引入element
import {ElMessage} from 'element-plus'
// 引入封装好的axios
import http from '../../api/apis'

import { ref, reactive,watch } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
// 引入md5加密hooks、
import useMd5 from '../../hooks/useMd5'

//// 可以获取到当前模式的名称及开发环境的端口号
import { onMounted} from "vue";
   onMounted(()=>{
       console.log(process.env.VUE_APP_TYPE);
   })
//引入验证封装函数  
const {verificationEmail,verificationPwd} = require("../../util/verification")

//  创建切换登录注册内容的变量
const menuData = ref([{
  txt: '登录',
  current: true,
  type: 'login'
},
{
  txt: '注册',
  current: false,
  type: 'register'
}
])
// 创建模式变量 默认为登录状态
const model = ref('login')
// 切换登录注册模块函数
const clickMenu = (data: any) => {
  // 遍历所有模块变成没有选中
  menuData.value.forEach((item) => {
    console.log(item.current);
    item.current = false
  })
  // 点击当前的变为选中
  data.current = true
  // 切换模式变量值
  model.value = data.type

}
// 表单
const ruleFormRef = ref<FormInstance>();
const validatePass = (rule: any, value: any, callback: any) => {
  // let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/;// 验证密码 6至15位的字母+数字--工具验证
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else if (verificationPwd(value)) {//验证格式不成功
    callback(new Error("密码格式有误!6至15位的字母+数字"));
  } else {
    callback();
  }
};
// 验证密码是否一致
const validatePass2 = (rule: any, value: any, callback: any) => {
  // 登录时跳过，不进行判断
  if (model.value === 'login') {
    callback();
  }
  if (value === "") {
    callback(new Error("重复密码不能为空"));
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};
// 验证邮箱函数
const checkUser = (rule: any, value: any, callback: any) => {
  // 创建邮箱正则来进行邮箱格式校验---使用封装的工具
  // let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; 
  if (!value) {
    return callback(new Error("邮箱不能为空！！"));
  } else if (verificationEmail(value)) {
    return callback(new Error("邮箱格式有误！！"));
  } else {
    callback();
  }
};
// 数据变量对象
const ruleForm = reactive({
  password: "",
  passwords: "",
  username: ""
});
//路由函数赋值给变量使用
 let router=useRouter()
// 置设置 以何种方式（函数）触发 表单验证 默认是blur失去焦点验证
const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  username: [{ validator: checkUser, trigger: "blur" }]//验证邮箱
});
// 提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      // 数据可以提交就使用封住好的axios发送请求  baseURL已经配置过
      // http("/one").then((res:any)=>{console.log(res)})
      // 判断当前是登录还是注册
      if(model.value==='login'){//////////////////登录
        console.log('登录')
        http(`/register?uname=${ruleForm.username}&pwd=${ruleForm.password}`,'GET').then((res:any)=>{
          console.log('登录请求发送成功');
          let {data}=res//把data数据结构出来
          console.log(data);
          
          if(data.length!=0){
            console.log("登录成功")
            // 编程式导航路由跳转到首页
            router.push('/home')
          }else{
            console.log("登录失败")
          }
        })
      }else{
        //////////////////////////注册
        // 发送的信息储存到对象中
        let data={
          uname:ruleForm.username,
          pwd:useMd5(ruleForm.password).value
        }
        // 发送post请求
        http('/register','POST',data).then((res:any)=>{
          console.log(res)
          // 判断注册是否成功--看注册后返回的数据是否为空
          let {data}=res //把res.data数据结构出来
          // 判断data的key值长度是否为空--原型上的key值方法
          if(Object.keys(data).length!==0){
            ElMessage('注册成功');
            // 注册成功后切换到登录模式
            model.value='login'
            // 顶部切换按钮切换至登录--所有变量变成false，把登录的变成true
            menuData.value.forEach((item) => {
              item.current = false
            })
            menuData.value[0].current=false
          }else{
            ElMessage.error('注册失败')
          }
        })
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
//////// 表单验证结束
let btnbool=ref(true)//输入框为空时不能点击提交按钮
// 监听表单绑定的变量数组变化
watch(ruleForm,(item)=>{
  console.log(item)
  //判断当前是登录还是注册--登录判断2个值；注册判断3个值
   if(model.value==='login'){//登录
    if(item.username!=''&&item.password!=''){
      btnbool.value=false
    }else{
      btnbool.value=true
    }
   }else{//注册
    if(item.username!=''&&item.password!=''&&item.passwords!=''){
      btnbool.value=false
    }else{
      btnbool.value=true
    }
   }
})

</script>
  
<style lang="scss">
.login {
  background-color: skyblue; //深蓝色
  height: 100%;
}

html,
body,
#app {
  //设置页面100%高
  height: 100%;
}

// 设置切换样式开始
.login-wrap {
  width: 330px;
  margin: auto;
}

.menu-tab {
  text-align: center;

  li {
    display: inline-block;
    width: 88px;
    line-height: 36px;
    font-size: 14px;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
  }
}

.current {
  background-color: rgba(255, 255, 255, 0.5); //白色半透明
}

// 设置切换样式结束

// 表单样式
.demo-ruleForm {
  width: 50%;
  margin: 50px auto;

  label {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    color: #fff;
  }

  .item-from {
    margin-bottom: 13px;
  }

  .block {
    display: block;
    width: 100%;
  }

  .login-btn {
    margin-top: 19px;
  }
}

// 表单样式
</style>